<template>
  <view class="contact">
    <view class="title">
      <!-- <uni-search-bar @confirm="onRefresh" v-model="param.username" @blur="onRefresh" @cancel="cancel">
      </uni-search-bar> -->
      <nut-searchbar v-model="param.userName" placeholder="请输入名称" @search="getUserList">
        <template #rightout>
          <div @click="getUserList">
            搜索
          </div>
        </template>
      </nut-searchbar>
      <!-- <button size="mini" @click="groupList" plain type="primary">创建群聊</button> -->
    </view>
    <scroll-view class="scroll_list" refresher-enabled="true" :lower-threshold="100" :refresher-triggered="triggered"
      @refresherrefresh="onRefresh" @scrolltolower="scrolltolower" scroll-y>
      <div v-for="(item, index) in userList" :key="index" flex items-center justify-start p-20rpx @click="toChat(item)">
        <div>
          <i-image borderRadius="20rpx" :src="item.face || '/static/default.png'"></i-image>
        </div>
        <div m-10rpx mt-10rpx w-full>
          <div flex justify-between>
            <div>
              <span>{{ item.name }}</span>
              <span ml-20rpx v-if="item.unread > 0">
                <nut-tag type="primary" round plain>{{ item.unread }}</nut-tag>
              </span>
            </div>
            <div>
              <span>{{ item.lastTalkTime }}</span>
            </div>
          </div>
          <div mt-10rpx>
            {{ item.lastTalkMessage }}
          </div>
        </div>
      </div>
      <!-- <uni-list>
        <uni-list-item v-for="(item, index) in userList" :key="item.id" :index="index" :title="item.nickName"
          :note="item.description" :thumb="item.avatarUrl" :clickable="true" @click="clickItem(item)" thumb-size="lg">
        </uni-list-item>
        <uni-load-more v-if="total > 20" :status="loadStatus"></uni-load-more>
      </uni-list> -->
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from "vue";
import { getTalkList } from "@/api/im";
import storage from '@/utils/storage'

const param = reactive({})

const userList = ref<any>([])
const total = ref<number>(0)
const triggered = ref<boolean>(false)

onMounted(() => {
  getUserList()
})

// 加载状态
const loadStatus = computed(() => {
  if (triggered.value) {
    return 'loading'
  }
  if (userList.value.length === total.value) {
    return 'no-more'
  }
  return 'more'
})

const toChat = (item: any) => {
  uni.navigateTo({
    url: `/pages/im/index?userId=${item.userId}`
  });
}

//列表加载
const getUserList = async () => {
  triggered.value = true
  const data = await getTalkList(param)

  if (data.data.success) {
    if (userList.value.length <= 10) {
      userList.value = data.data.result
    } else {
      userList.value.push(...data.data.result)
    }
  }
  // total.value = data!.total
  triggered.value = false
}

const cancel = () => {
  if (param.username) {
    setTimeout(() => {
      onRefresh()
    }, 200)
  }
}

const clickItem = (item: any) => {
  uni.navigateTo({
    url: `/pagesChat/chatView/chatView?nickName=${item.nickName}&username=${item.username}`
  });
}

const groupList = () => {
  uni.navigateTo({
    url: `/pagesChat/groupList/groupList`
  });
}

//下拉刷新
const onRefresh = () => {
  userList.value = []
  param.pageNum = 1
  getUserList()
}

//触底
const scrolltolower = () => {
  if (param.pageSize * (param.pageNum - 1) < total.value) {
    param.pageNum++
    getUserList()
  }
}


</script>

<style lang="scss" scoped>
view.contact {
  display: block;
  width: 100vw;
  overflow: hidden;

  &>uni-search-bar {
    height: 100upx;

    ::v-deep .uni-searchbar {
      background: #ffffff;
    }
  }

  &>scroll-view {
    height: calc(100vh - 100upx);
  }

  &>view.title {
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;

    uni-search-bar {
      flex: 1;
    }

    button {
      margin-right: 20rpx;
    }
  }
}
</style>
